/* main.css */
body {
	position: relative;
	z-index: 100000;
	
	/* --- for IE --- */
	scrollbar-face-color: rgba(0, 0, 0, 0.5);
}

/* --- for chrome and Safari --- */
::-webkit-scrollbar {
	width: 0.5em;
}
	::-webkit-scrollbar-track{
		background: #333;
	}
	::-webkit-scrollbar-thumb {
		background: whitesmoke;
		border-radius: 0.5em;
	}

/* reset the default styles */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    -o-box-sizing: border-box !important;
    box-sizing: border-box !important;
	
	font-family: 'Microsoft YaHei', serif;
}

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 10px;
}

ol, ul, dl {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

.fp-tableCell { /* --- fullpage.css --- */
    vertical-align: top !important;
}

/* --- frame default style --- */
.Row {
    width: 100%;
}

.Row.CenterX {
    text-align: center;
}

.Grid-Row {
    width: 100%;
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
}

.Grid-Row > .Grid-Column {
    display: table-cell;
}

.Grid-Row.CenterX,
.Grid-Row > .Grid-Column.CenterX {
    text-align: center;
}

.Grid-Row.CenterY > .Grid-Column,
.Grid-Column.CenterY {
    float: none !important;
    vertical-align: middle;
}

.Column_1-1 {
    width: 100%;
}

.Column_2-3 {
    width: 66.6%;
}

.Column_3-10 {
    width: 30%;
}

/* --- section's common styles --- */
.section1 .fp-tableCell,
.section7 .fp-tableCell{
	vertical-align: middle !important;
	overflow: hidden;
}
.section h4 {
    letter-spacing: 0.1em;
    color: #333;
	width: 100%;
    margin: 0 auto;
}

.section {
	overflow: hidden;
}

.section2 h4 {
	width: 70%;
	font-weight: 400;
}

.section6,
.section7 {
    background: url('../png/page5/bg_1.jpg');
    background-size: auto 100%;;
	background-repeat: no-repeat;
}

.section6 header h4,
.section7 header h4 {
	color: white;
	font-weight: 300;
}

.section6 {
	position: relative;
}

/* --- page 1st --- */
.section1 .title,
.section1 footer {
	position: relative;
	z-index: 100000;
}

.section1 .bg_code {
	position: absolute;
	width: 200em;
	top: 0;
	left: 0;	
	z-index: 100;
	height: 100%;
	overflow: hidden;
}

.section1 .bg_code .highlight {
    height: 100%;
	overflow: hidden;
}

.section1 .bg_code > div {
	width: 100%;
	-webkit-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 0;
	column-gap: 0;
}

/* --- mozilla hacks --- */
@-moz-document url-prefix() {
	.section1 .bg_code > div {
		width: 200em;
		-moz-column-count: 2;
	}
}

.section1 .title img {
	width: 75%;
}

.section1 footer {
	position: absolute;
	bottom: 1em;
}

/* --- page 2nd --- */
.section2 {
    background: url('../png/page1/bg_2.png');
    background-repeat: repeat;
    background-size: 1em auto;
}

.section2 .circle_wider {
    display: none;
}

.section2 .circle {
    width: 25em;
    height: 25em;
    border: 0.1em solid #333;
    border-radius: 100%;
    margin-top: -15em;
}

.section2 .circle > div > div {
    margin: 0 auto;
    width: 11em;
    height: 11em;
    border: 0.1em #333 solid;
    border-radius: 100%;
    margin-top: 8em;
    position: relative;
	animation: circle_rotate 5s ease-in-out infinite;
	-webkit-animation: circle_rotate 5s ease-in-out infinite;
	-moz-animation: circle_rotate 5s ease-in-out infinite;
}
	@keyframes circle_rotate {
		0%   { transform: rotate(50deg)   }
		50%  { transform: rotate(-140deg) }
		100% { transform: rotate(50deg)   }
	}
	@-webkit-keyframes circle_rotate {
		0%   { -webkit-transform: rotate(50deg)   }
		50%  { -webkit-transform: rotate(-140deg) }
		100% { -webkit-transform: rotate(50deg)   }
	}
	@-moz-keyframes circle_rotate {
		0%   { -moz-transform: rotate(50deg)   }
		50%  { -moz-transform: rotate(-140deg) }
		100% { -moz-transform: rotate(50deg)   }
	}

.section2 .circle > div > div:after {
    content: '';
    position: absolute;
    background: black;
    border-radius: 100%;
    width: 0.5em;
    height: 0.5em;
    bottom: 1em;
    left: 1.7em;
}

.section2 header {
    margin: -5em 0 6em 0; 
}

.section2 .title > div.Column_1-1 {
    text-align: center;
}

.section2 .title > div.Column_1-1 > img {
    width: 65%;
    margin-top: 0.1em;
}

.section2 footer {
    position: absolute;
    bottom: 2em;
    right: 1em;
}
	.section2 footer:before {
		content: '';
		width: 25em;
		height: 25em;
		border-radius: 100%;
		border: 0.2em #333 dotted;
		position: absolute;
		top: -5em;
		right: -12em;
		animation: circle_rotate_footer 50s linear infinite;
		-webkit-animation: circle_rotate_footer 50s linear infinite;
		-moz-animation: circle_rotate_footer 50s linear infinite;
	}
	@keyframes circle_rotate_footer {
		0%   { transform: rotate(0)   }
		50%  { transform: rotate(-90deg) }
		100% { transform: rotate(0)   }
	}
	@-webkit-keyframes circle_rotate_footer {
		0%   { -webkit-transform: rotate(0)   }
		50%  { -webkit-transform: rotate(-90deg) }
		100% { -webkit-transform: rotate(0)   }
	}


.section2 footer > div.Grid-Column div {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0.6em;
    color: #333;
}

/* --- page 3rd --- */
.section3 {
    background: url('../png/page2/bg_2.jpg');
    background-repeat: repeat;
    background-size: 14em auto;
}

.section3 header.Grid-Row {
    margin: 4em 0 2em 0;
}

.section3 header h3:last-child {
    display: none;
}

.section3 .title img {
    margin-top: 1em;
    width: 70%;
}

.section3 .title img:first-child {
    margin-bottom: -2em;
}

.section3 .title img:last-child {
    display: none;
}

.section3 .lang_wrapper {
    position: absolute;
    bottom: 5em;
}

.section3 .lang {
    margin: 0 auto;
    text-align: center;
}

.section3 .lang > div {
    font-size: 0.8em;
    display: inline-block;
    width: 4em;
    height: 4em;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.3);
    margin-right: 0.5em;
    padding-top: 0.6em;
    position: relative;
	box-shadow: 0 0 0.5em white;
	color: rgb(211, 211, 211);
	font-weight: 600;
	
	transition: .3s all ease-in;
	-webkit-transition: .3s all ease-in;
	-moz-transition: .3s all ease-in;
	
	z-index: 10;
}
	.section3 .lang > div:hover {
		box-shadow: 0 0 2em white;
		cursor: pointer;
	}
.section3 .lang > div:nth-child(1) {
	animation: circle_flash_out_1 .7s ease-in-out;
	-webkit-animation: circle_flash_out_1 .7s ease-in-out;
	-moz-animation: circle_flash_out_1 .7s ease-in-out;
}
.section3 .lang > div:nth-child(2) {
	animation: circle_flash_out_2 .7s ease-in-out;
	-webkit-animation: circle_flash_out_2 .7s ease-in-out;
	-moz-animation: circle_flash_out_2 .7s ease-in-out;
}
.section3 .lang > div:nth-child(3) {
	animation: circle_flash_out_3 .7s ease-in-out;
	-webkit-animation: circle_flash_out_3 .7s ease-in-out;
	-moz-animation: circle_flash_out_3 .7s ease-in-out;
}
.section3 .lang > div:nth-child(4) {
	animation: circle_flash_out_4 .7s ease-in-out;
	-webkit-animation: circle_flash_out_4 .7s ease-in-out;
	-moz-animation: circle_flash_out_4 .7s ease-in-out;
}
.section3 .lang > div:nth-child(5) {
	animation: circle_flash_out_5 .7s ease-in-out;
	-webkit-animation: circle_flash_out_5 .7s ease-in-out;
	-moz-animation: circle_flash_out_5 .7s ease-in-out;
}

@keyframes circle_flash_out_1 {
	0% {left: 9em;transform: rotate(0);opacity: 0;}
	100% {left: 0;transform: rotate(360deg);opacity: 1;}
}
	@-webkit-keyframes circle_flash_out_1 {
		0% {left: 9em;-webkit-transform: rotate(0);opacity: 0;}
		100% {left: 0;-webkit-transform: rotate(360deg);opacity: 1;}
	}
	@-moz-keyframes circle_flash_out_1 {
		0% {left: 9em;-moz-transform: rotate(0);opacity: 0;}
		100% {left: 0;-moz-transform: rotate(360deg);opacity: 1;}
	}
@keyframes circle_flash_out_2 {
	0% {left: 4.5em;transform: rotate(0);opacity: 0;}
	100% {left: 0;transform: rotate(360deg);opacity: 1;}
}
	@-webkit-keyframes circle_flash_out_2 {
		0% {left: 4.5em;-webkit-transform: rotate(0);opacity: 0;}
		100% {left: 0;-webkit-transform: rotate(360deg);opacity: 1;}
	}
	@-moz-keyframes circle_flash_out_2 {
		0% {left: 4.5em;-moz-transform: rotate(0);opacity: 0;}
		100% {left: 0;-moz-transform: rotate(360deg);opacity: 1;}
	}
@keyframes circle_flash_out_3 {
	0% {transform: rotate(0);opacity: 0;}
	100% {transform: rotate(360deg);opacity: 1;}
}
	@-webkit-keyframes circle_flash_out_3 {
		0% {-webkit-transform: rotate(0);opacity: 0;}
		100% {-webkit-transform: rotate(360deg);opacity: 1;}
	}
	@-moz-keyframes circle_flash_out_3 {
		0% {-moz-transform: rotate(0);opacity: 0;}
		100% {-moz-transform: rotate(360deg);opacity: 1;}
	}
@keyframes circle_flash_out_4 {
	0% {left: -4.5em;transform: rotate(0);opacity: 0;}
	100% {left: 0;transform: rotate(360deg);opacity: 1;}
}
	@-webkit-keyframes circle_flash_out_4 {
		0% {left: -4.5em;-webkit-transform: rotate(0);opacity: 0;}
		100% {left: 0;-webkit-transform: rotate(360deg);opacity: 1;}
	}
	@-moz-keyframes circle_flash_out_4 {
		0% {left: -4.5em; -moz-transform: rotate(0);opacity: 0;}
		100% {left: 0; -moz-transform: rotate(360deg);opacity: 1;}
	}
@keyframes circle_flash_out_5 {
	0% {left: -9em; transform: rotate(0); opacity: 0;}
	100% {left: 0; transform: rotate(360deg); opacity: 1;}
}
	@-webkit-keyframes circle_flash_out_5 {
		0% {left: -9em; -webkit-transform: rotate(0); opacity: 0;}
		100% {left: 0; -webkit-transform: rotate(360deg); opacity: 1;}
	}
	@-moz-keyframes circle_flash_out_5 {
		0% {left: -9em; -moz-transform: rotate(0); opacity: 0;}
		100% {left: 0; -moz-transform: rotate(360deg); opacity: 1;}
	}

.section3 .lang > div:before {
    content: '';
    height: 0;
    width: 80%;
    border-top: 0.1em solid rgb(211, 211, 211);
    position: absolute;
    top: 50%;
    left: 10%;
	z-index: 100;
}

.section3 .lang > div:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 100%;
}

.section3 .lang > div:last-child {
    margin-right: 0;
}

/* --- page 4th --- */
.section4 header {
    margin: 2.5em 0;
}

.section4 header h6 {
    position: relative;
    font-size: 0.5em;
    height: 2em;
    letter-spacing: 0.15em;
}

.section4 .content {
    margin: 1em 0 2em 0;
    font-size: 0.5em;
}

.section4 .content .ballon div#canvas-wrapper {
	margin-left: -2em;
	position: relative;
}

.section4 .content .ballon .subject {
    position: absolute;
    bottom: 2.5em;
    right: 5em;
}

.section4 .content .ballon .subject > div {
    position: relative;
}

.section4 .content .ballon .subject > div:before {
    content: '';
    position: absolute;
    top: 0.2em;
    left: -1.5em;
    width: 1em;
    height: 1em;
}

.section4 .subject > div:nth-child(1):before{background: #95ACBA}
.section4 .subject > div:nth-child(2):before{background: #95ACBA}
.section4 .subject > div:nth-child(3):before{background: #005CAF}
.section4 .subject > div:nth-child(4):before{background: #3C56A3}
.section4 .subject > div:nth-child(5):before{background: #12528F}
.section4 .subject > div:nth-child(6):before{background: #3D8FB7}
.section4 .subject > div:nth-child(7):before{background: #517B89}

.section4 .title img:first-child {
    width: 60%;
}

.section4 .title img:nth-child(2) {
    width: 70%;
}

.section4 .title img:last-child {
    width: 40%;
}

.section4 footer {
	display: none;
}

/* --- page 5th --- */
.section5 header {
	margin: 3em 0;
}

.section5 header h6:last-child {
    display: none;
}

.section5 .content {
    text-align: center;
    margin-bottom: 3em;
}

.section5 .content .chess {
    margin: 2em auto;
}

.section5 .content .chess table {
    margin: 0 auto;
}

.section5 .content .chess table td {
    width: 1.4em;
    height: 1.4em;
	background: whitesmoke;
    transition: 1s background ease-in;
	border-radius: 100%;
}

.section5 .content .boy,
.section5 .content .girl {
    position: relative;
    font-size: 0.7em;
}

.section5 .content .boy {margin-right: 1em;}
.section5 .content .girl {margin-left: 1em;}

.section5 .content .boy:before,
.section5 .content .girl:before {
    content: '';
    position: absolute;
    top: 0.25em;
    left: -1.5em;
    width: 1em;
    height: 1em;
	border-radius: 100%;
}

.section5 .content .boy:before {
    background: black;
}

.section5 .content .girl:before {
    background: white;
}

.section5 .title > div {
	top: 0;
}

.section5 .title img {
    width: 70%;
}

/* --- page 6th --- */
.section6 header {
    margin: 4em 0;
}

.section6 .title {
    margin-bottom: 6em;
}

.section6 .title img {
    width: 80%;
}

.section6 .content {
    position: absolute;
    bottom: 5em;
}

.section6 .content > div {
    width: 70%;
    background: rgba(0, 0, 0, 0.4);
    margin: 1.2em auto 0;
    color: white;
    padding: 0.5em 0.3em;
    font-size: 0.9em;
	letter-spacing: 0.1em;
	font-weight: 300;
	border-radius: 1.5em;
	text-align: center;
}

/* --- page 7th --- */
.section7 header {
    position: absolute;
	top: 3em;
}

.section7 .content > form {
    width: 78%;
    margin: 0 auto;
    box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.section7 .content > form * {
    width: 100%;
    border: 0;
}

.section7 form > div > *:not(textarea) {
	height: 4em;
}

.section7 .content > form > div > *:focus {
	outline: none;
}

.section7 .content > form > div {
	position: relative;
}

.section7 footer {
    position: absolute;
    color: #999;
	bottom: 0.3em;
}

.section7 form .select_box {
	position: relative;
}
.section7 form .select_box:before {
	content: '▾';
	position: absolute;
	top: 0.8em;
	right: 1em;
	color: white;
}

.section7 form .select_box input {
	position: relative;
	opacity: 0;
	z-index: 1;
}

.section7 .content > form > div > * {
    padding: 0.5em;
	background: rgba(0, 0, 0, 0.3);
	color: white;
	font-size: 1em;
}

.section7 .select_box {
	height: 4em;
	position: relative;
}

.section7 .select_box ul {
	position: absolute;
	left: 0;
	top: 0;
	height: 4em;
	overflow: hidden;
	padding: 0 !important;
	transition: .21s all ease-in-out;
	-webkit-transition: .2s all ease-in-out;
	-moz-transition: .2s all ease-in-out;
	z-index: 10;
}

.section7 .select_box ul li {
	line-height: 12px; 
	height: 4em;
	background: #333;
	padding: 1.5em 0.5em;
	margin: 0;
}

.section7 .select_box ul:hover {cursor: pointer; }
.section7 .select_box.from ul:hover {overflow-y: scroll;}

.section7 .select_box ul li:hover {
	background: black;
	color: white;
}

.section7 .select_box ul li:first-child {
	background: transparent;
}

.section7 form > div > * {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
}

.section7 form > div:last-child input[type="submit"] {
	position: relative;
	z-index: 100;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.7);
}

.section7 form > div:last-child {
	overflow: hidden;
}

.section7 form > div:last-child:before {
	content: '';
	height: 100%;
	width: 0;
	position: absolute;
	left: 0;
	top: 0;
	background: black;
	z-index: 10;
	transition: .4s ease-in-out all;
	-webkit-transition: .4s ease-in-out all;
	-moz-transition: .4s ease-in-out all;
}

.section7 form > div:last-child:hover:before {
	width: 100%;
}

.section7 form > div > *::-webkit-input-placeholder {color: white;}
.section7 form > div > *::-moz-input-placeholder {color: white;}

/* --- mozilla firefox --- */
.section7 form textarea {
	font-family: 'Microsoft YaHei';
	font-size: 0.8em;
    resize: none;
}

/* --- loading spinner --- */
.fakeloader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	background: #333;
}

.spinner1 {
  width: 50px;
  height: 50px;
  position: relative;
  display: none;
}


.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: bounce 2s infinite ease-in-out;
  -moz-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  animation-delay: -1s;
}

@keyframes bounce {
  0%, 100% { transform: scale(0.0) }
  50% { transform: scale(1.0); }
}
	@-webkit-keyframes bounce {
	  0%, 100% { -webkit-transform: scale(0.0) }
	  50% { -webkit-transform: scale(1.0) }
	}
	@-moz-keyframes bounce {
	  0%, 100% { -moz-transform: scale(0.0) }
	  50% { -moz-transform: scale(1.0); }
	}

/* --- section4 && section5 --- */
@media (max-width: 400px) {
	.section4 .title,
	.section5 .title {
		position: absolute;
		left: 0;
		bottom: 1em;
	}
}